<template>
  <div class="error fixed-top">
    <NavBar title="文件上传demo" fixed back url="/home"/>
    <van-uploader class="uploader" :after-read="onRead">
      <van-icon name="photograph" />
    </van-uploader>
  </div>
</template>

<script>
import NavBar from '../../components/common/NavBar.vue'
import demoApi from '../../api/demo'
export default {
  name: 'Upload',
  data () {
    return {
    }
  },
  components: {
    NavBar
  },
  methods: {
    onRead (file) {
      let formData = new FormData()
      formData.append('file', file.file)
      demoApi.upload(formData).then(function (res) {
        if (res.data.success) {
          alert(res.data.re)
          console.log(res.data.re)
        } else {
          alert(res.data.msg)
        }
      })
    }
  }
}
</script>
<style scoped>
  .uploader {
    width: 100px;
    height: 100px;
    border: 1px solid #fafafa;
    background: #fff;
  }
  .uploader i {
    font-size: 30px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    vertical-align: middle;
  }
</style>
